<template>
  <div class="nl">
    <div class="main1">
      <div class="main2">
        <div class="main3">
          <img src="../assets/images/首页logo.jpg" width="30px" />
        </div>
        <div class="main4">
          <span style="font-weight: 1000; font-size: 20px">淘物</span>
        </div>
        <div class="main5">淘物优品</div>
        <div class="main6">
          <el-select v-model="value" placeholder="请选择" size="mini">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="main7">
          <el-input type="text" placeholder="苹果笔记本" width="500px" v-model="goodsInfo"/>
        </div>
        <div class="main8">
          <el-button type="success" @click="search" width="28px"
            >搜索</el-button
          >
        </div>
        <div class="main9">
          <el-button type="info" plain width="50px" @click="goMyOder"
            ><span
              >我的订单
              <el-badge :value="orderNum" :max="6" class="item"
                ><img
                  src="../assets/images/购物车.png"
                  width="15px" /></el-badge></span
          ></el-button>
        </div>
        <div class="main10">
          <div class="main11">iphone11</div>
          <div class="main11">低价洗衣机</div>
          <div class="main11">爆款浪琴</div>
          <div class="main11">iphone XS</div>
          <div class="main11">LV经典款</div>
          <div class="main11">热销iPaid</div>
        </div>
      </div>

      <div class="main12">
        <div class="main13">
          <div class="main14">
            <div class="main15">淘物优品</div>
            <div class="main16">
              <el-menu
                class="el-menu-demo"
                mode="vertical"
                @select="handleSelect"
                text-color="white"
                background-color="black"
                active-text-color="white"
                unique-opened
              >
                <el-menu-item index="1" @click="bac">
                  <span slot="title">手机通讯</span>
                </el-menu-item>
                <el-menu-item index="2">
                  <span slot="title">平板</span>
                </el-menu-item>
                <el-menu-item index="3">
                  <span slot="title">电脑办公</span>
                </el-menu-item>
                <el-menu-item index="4">
                  <span slot="title">数码影音</span>
                </el-menu-item>
                <el-menu-item index="5">
                  <span slot="title">奢饰品</span>
                </el-menu-item>
                <el-menu-item index="6">
                  <span slot="title">家电</span>
                </el-menu-item>
                <el-menu-item index="7">
                  <span slot="title">更多分类</span>
                </el-menu-item>
              </el-menu>
            </div>
          </div>
        </div>
        <div class="main17">
          <div class="main18">
            <div class="main19">
              <div class="main20">
                <el-breadcrumb>
                  <el-breadcrumb-item :to="{ path: '/recovery' }"
                    >淘物回收</el-breadcrumb-item
                  >
                  <el-breadcrumb-item :to="{ path: '/searchGoods' }"
                    >淘物夺宝岛</el-breadcrumb-item
                  >
                  <el-breadcrumb-item
                    ><a href="/">下载APP</a></el-breadcrumb-item
                  >
                </el-breadcrumb>
              </div>
              <div class="main21">
                <div class="main22">
                  <div class="block">
                    <span class="demonstration"></span>
                    <el-carousel height="350px">
                      <el-carousel-item v-for="item in elImages" :key="item.id">
                        <el-image :src="item.images"></el-image>
                      </el-carousel-item>
                    </el-carousel>
                  </div>
                </div>
                <div class="main23">
                  <div class="main24">
                    <img src="../assets/images/首页格子1.png" height="100px" />
                  </div>
                  <div class="main25">
                    <img src="../assets/images/首页格子2.png" height="100px" />
                  </div>
                  <div class="main25">
                    <img src="../assets/images/首页格子3.png" height="100px" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="main26">
            <div class="main27">
              <img src="../assets/images/首页格子5.png" height="235px" />
            </div>
            <div class="main28">
              <div class="main29">
                <div class="main30">
                  <el-button type="info" plain @click="search" width="50px"
                    ><i class="el-icon-truck"></i
                    ><span>优品手机</span></el-button
                  >
                </div>
                <div class="main30">
                  <el-button type="info" plain @click="search" width="50px"
                    ><i class="el-icon-truck"></i
                    ><span>官翻电脑</span></el-button
                  >
                </div>
                <div class="main30">
                  <el-button type="info" plain @click="search" width="50px"
                    ><i class="el-icon-truck"></i
                    ><span>保真奢品</span></el-button
                  >
                </div>
              </div>
              <div class="main29">
                <div class="main30">
                  <el-button type="info" plain @click="search" width="50px"
                    ><i class="el-icon-truck"></i
                    ><span>淘物严选</span></el-button
                  >
                </div>
                <div class="main30">
                  <el-button type="info" plain @click="search" width="50px"
                    ><i class="el-icon-truck"></i
                    ><span>高价回收</span></el-button
                  >
                </div>
                <div class="main30">
                  <el-button type="info" plain @click="search" width="50px"
                    ><i class="el-icon-truck"></i
                    ><span>家电联保</span></el-button
                  >
                </div>
              </div>
            </div>
            <div class="main31">
              <img src="../assets/images/首页格子6.png" height="100px" />
            </div>
          </div>
        </div>
      </div>
      <div class="main32">
        <div class="main33">
          <img
            src="../assets/images/首页限时秒杀.jpg"
            height="90px"
            width="1300px"
            style="margin-top: 2px"
          />
        </div>
        <div class="main34">
          <div class="main35" v-for="item in picImg1" :key="item.id">
            <div class="main36">
              <el-image :src="item.img" height="100px"></el-image>
            </div>
            <div class="main37">
              <div class="main38">
                <span>{{ item.name }}</span>
              </div>
              <div class="main39">
                <span>{{ item.price }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="main40">
          <div class="main41">
            <img
              src="../assets/images/首页酷玩3C.jpg"
              height="90px"
              width="1300px"
            />
          </div>
          <div class="main34">
            <div class="main35" v-for="item in picImg2" :key="item.id">
              <div class="main36">
                <el-image :src="item.img" height="100px"></el-image>
              </div>
              <div class="main37">
                <div class="main38">
                  <span>{{ item.name }}</span>
                </div>
                <div class="main39">
                  <span>{{ item.price }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="main42">
            <img src="../assets/images/首页底部栏.jpg" width="1300px" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getGoodsByInfoAPI, getSelfOrderListAPI } from "@/api"
export default {
  name: "Main",
  data() {
    return {
      goodsInfo:"",
      uid: sessionStorage.getItem("uid"),
      orderNum:0,
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "全部分类",
      url: require("../assets/images/首页logo.jpg"),
      activeIndex1: "1",

      elImages: [
        {
          id: 1,
          images: require("../assets/images/首页轮播1.jpg"),
        },
        { id: 2, images: require("../assets/images/首页轮播3.jpg") },
      ],
      picImg1: [
        {
          id: 1,
          img: "http://img13.360buyimg.com/n7/jfs/t1/219583/26/7800/151098/61b8a3f2E2879c4f6/9b73c1d24e0abecb.jpg",
          name: "荣耀X30 骁龙6nm疾速5G芯 66W超级快充 120Hz全视屏 全网通版 8GB+128GB 钛空银",
          price: "￥1699.00",
        },
        {
          id: 2,
          img: "http://img12.360buyimg.com/n7/jfs/t1/128527/3/27147/132209/62469c68E4116a231/b646e4c737859f04.jpg",
          name: "荣耀Play6T 6.74英寸高刷护眼屏 侧边指纹解锁 5000mAh大电池  5G手机 8GB+128GB 钛空银",
          price: "￥1199.00",
        },
        {
          id: 3,
          img: "http://img13.360buyimg.com/n7/jfs/t1/209698/32/23862/430468/62b04e90Ec94b5805/f84e4a9d41ab7c95.jpg",
          name: "OPPO K9x 8+128GB 银紫超梦 天玑810   90Hz电竞屏 6400万三摄 拍照5G手机oppok9x",
          price: "￥1399.00",
        },
        {
          id: 4,
          img: "http://img14.360buyimg.com/n7/jfs/t1/172293/31/15213/103248/60cc640eEc8781f91/731a4686b7b2ac11.jpg",
          name: "Redmi Note 11 5G 天玑810  5000mAh大电池  6GB +128GB 神秘黑境 智能手机 小米 红米",
          price: "￥2199.00",
        },
        {
          id: 5,
          img: "http://img14.360buyimg.com/n7/jfs/t1/55582/2/19910/233268/62b03040Ef5810415/d627d66a2252e387.jpg",
          name: "Redmi 10A 5000mAh大电量 1300万AI相机  4GB+64GB 暗影黑 智能手机 小米 红米",
          price: "￥699.00",
        },
      ],
      picImg2: [
        {
          id: 1,
          img: "http://img13.360buyimg.com/n7/jfs/t1/219583/26/7800/151098/61b8a3f2E2879c4f6/9b73c1d24e0abecb.jpg",
          name: "荣耀X30 骁龙6nm疾速5G芯 66W超级快充 120Hz全视屏 全网通版 8GB+128GB 钛空银",
          price: "￥1699.00",
        },
        {
          id: 2,
          img: "http://img12.360buyimg.com/n7/jfs/t1/128527/3/27147/132209/62469c68E4116a231/b646e4c737859f04.jpg",
          name: "荣耀Play6T 6.74英寸高刷护眼屏 侧边指纹解锁 5000mAh大电池  5G手机 8GB+128GB 钛空银",
          price: "￥1199.00",
        },
        {
          id: 3,
          img: "http://img13.360buyimg.com/n7/jfs/t1/209698/32/23862/430468/62b04e90Ec94b5805/f84e4a9d41ab7c95.jpg",
          name: "OPPO K9x 8+128GB 银紫超梦 天玑810   90Hz电竞屏 6400万三摄 拍照5G手机oppok9x",
          price: "￥1399.00",
        },
        {
          id: 4,
          img: "http://img14.360buyimg.com/n7/jfs/t1/172293/31/15213/103248/60cc640eEc8781f91/731a4686b7b2ac11.jpg",
          name: "Redmi Note 11 5G 天玑810  5000mAh大电池  6GB +128GB 神秘黑境 智能手机 小米 红米",
          price: "￥2199.00",
        },
        {
          id: 5,
          img: "http://img14.360buyimg.com/n7/jfs/t1/55582/2/19910/233268/62b03040Ef5810415/d627d66a2252e387.jpg",
          name: "Redmi 10A 5000mAh大电量 1300万AI相机  4GB+64GB 暗影黑 智能手机 小米 红米",
          price: "￥699.00",
        },
      ],
    };
  },

  mounted() {
    // this.showOrders();
  },

  methods: {
    async showOrders() {
      const id = parseInt(this.uid);
      const res = await getSelfOrderListAPI(id);
      if (res.data.statusCode === 200) {
        this.orderList = res.data.data;
        // this.porps = this.orderList
        this.orderNum = this.orderList.length
      }
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },

    async search() {
      const goodsInfoRes = await getGoodsByInfoAPI(this.goodsInfo);
      console.log(goodsInfoRes);
    },
    bac() {
      
    },
    goMyOder(){
      this.$router.push("/myOrder")
    }
  },
};
</script>

<style scoped>
.main1 {
  margin: auto;
  width: 1300px;
  height: 1000px;
  /* background: yellow; */
}
.main2 {
  width: 1300px;
  height: 100px;
  background: white;
}

.el-menu-item {
  width: 300px;
  height: 70px;
  padding: 0 250px;
}
.main3 {
  float: left;
  width: 1px;
  height: 30px;
  margin: 30px 30px;

  background: yellow;
}

.main4 {
  float: left;
  width: 80px;
  /* background: black; */
  margin: 32px 0px;
}
.main5 {
  width: 100px;
  height: 30px;
  margin-top: 32px;
  margin-left: 100px;
  float: left;
  /* background: black; */
}
.main6 {
  float: left;
  margin-left: 10px;
  margin-top: 30px;

  /* background: black; */
}
.main6 /deep/ .el-input {
  width: 50% !important;
}
.main7 {
  width: 450px;
  height: 50px;
  float: left;
  margin-top: 17px;
  /* background: black; */
}
.main7 /deep/ .el-input {
  width: 450px;
  border: 2px solid rgb(41, 198, 41);
}
.main8 {
  width: 80px;
  height: 30px;
  float: left;
  /* background: black; */
  margin-left: 10px;
  margin-top: 20px;
}
.main9 {
  width: 100px;
  height: 30px;
  float: left;
  /* background: black; */
  margin-top: 15px;
  margin-left: 60px;
}
.item {
  margin-top: 7px;
  margin-right: 4px;
}
.main10 {
  width: 500px;
  height: 20px;
  /* background: black; */
  float: left;
  margin-left: 400px;
}
.main11 {
  width: 70px;
  height: 20px;
  float: left;
  font-size: 5px;
  color: gray;
  /* background: yellow; */
}
.main12 {
  width: 1300px;
  height: 540px;
  /* border: 1px solid black; */
}
.main13 {
  float: left;
  width: 300px;
  height: 540px;
  /* background: black; */
}
.main14 {
  width: 300px;
  height: 50px;
  background: rgb(63, 229, 63);
}
.main15 {
  /* float: left; */
  padding-top: 13px;
  font-weight: 500;
}
.main16 {
  float: left;
  margin-top: 10px;
}
div /deep/.el-submenu__title {
  padding: 0px 280px;
  height: 70px;
}
.el-submenu {
  width: 30px;
}
.main17 {
  float: left;
  width: 1000px;
  height: 540px;
  /* background: white; */
}
.main18 {
  margin-left: 5px;
  float: left;
  width: 740px;
  height: 540px;
  /* background: black; */
}
.main19 {
  width: 740px;
  height: 50px;

  background: rgb(63, 229, 63);
}
.main20 {
  padding-top: 15px;
  padding-left: 15px;
}
.main21 {
  margin-top: 20px;
  width: 740px;
  height: 490px;
  /* background: purple; */
}
.main22 {
  width: 740px;
  height: 345px;
  /* background: red; */
  /* border: 1px solid black; */
}
.main23 {
  width: 740px;
  height: 145px;
  /* background: red; */
}
.main24 {
  float: left;
  margin-top: 20px;
  width: 240px;
  height: 105px;
  /* border: 1px solid black; */
}
.main25 {
  float: left;
  margin-top: 20px;
  margin-left: 10px;
  width: 240px;
  height: 105px;
  /* border: 1px solid black; */
}
.main26 {
  float: left;
  width: 250px;
  height: 515px;
  margin-left: 5px;
  /* background: red; */
}
.main27 {
  width: 250px;
  height: 235px;
  /* background: black; */
}
.main28 {
  width: 250px;
  height: 160px;
  /* background: black; */
}
.main29 {
  /* margin-top: 35px; */
  float: left;
  width: 125px;
  height: 160px;
  /* background: purple; */
}
.main30 {
  width: 125px;
  height: 40px;
  margin-top: 10px;
  /* background: #f4f4f5; */
}
.main31 {
  margin-top: 20px;
  width: 250px;
  height: 100px;
  /* background: purple; */
}
.main32 {
  width: 1300px;
  height: 770px;
  /* background: yellow; */
}
.main33 {
  width: 1300px;
  height: 90px;
  /* background: yellow; */
}
.main34 {
  width: 1300px;
  height: 250px;
  background: white;
}
.main35 {
  width: 250px;
  height: 250px;
  float: left;
  /* background: red; */
  margin-left: 10px;
}
.main36 {
  width: 250px;
  height: 150px;
  /* background: black; */
}
.main36 .el-image {
  width: 150px;
  height: 150px;
}
.main37 {
  width: 250px;
  height: 100px;
  /* background: yellow; */
}
.main38 {
  width: 250px;
  height: 50px;
  font-size: 10px;
  /* background: purple; */
}
.main39 {
  width: 250px;
  height: 50px;
  margin-top: 10px;
  /* background: black; */
}
.main40 {
  width: 1300px;
  height: 340px;
  background: purple;
}
.main41 {
  width: 1300px;
  height: 90px;
  /* border: 1px solid black; */
}
.main42 {
  width: 1300px;
  height: 80px;
  /* background: black; */
}
</style>
